<template>
<!-- 主页 -->
  <div class="large-page">
    <top-bar class="header">
      <template v-slot:left><span @click="toSimPage">开始模拟</span></template>
      <template v-slot:center>
        <img src="../../assets/img/viruswatcher.png" alt="" style="height: 32px;">
      </template>
      <template v-slot:right><span @click="toMonPage">防疫监控</span></template>
    </top-bar>

    <div class="content" ref="content" id="content">
      <large-page-table />
      <div class="layer" data-depth-x="-0.05" data-depth-y="-0.025">
        <img class="content-map-bg" src="../../assets/img/map_bg.jpg">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from 'vue';
import Parallax from 'parallax-js';

import topBar from '../../components/content/top_bar/top_bar.vue'
import largePageTable from './child_comps/large_page_table.vue'

const content = ref(null); // 获取 content 元素，响应式设置高度

onMounted(() => {
  let w_height = window.innerHeight < 720 ? 720 : window.innerHeight; // 响应式获取高度
  content.value.style.height = w_height - 80 + "px";

  let dom_content = document.getElementById('content'); // 视察插件相关
  let parallax = new Parallax(dom_content);
  parallax;
})

/**
 * 跳转页面函数
 */
const emit = defineEmits(['changePage'])
const toSimPage = () => {
  emit('changePage', 'sim');
}
const toMonPage = () => {
  emit('changePage', 'mon');
}
</script>

<style scoped>
  .large-page {
    width: 100%;
    background-color: #2c3e50;
  }

  .header {
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 15px rgba(60, 60, 60, 0.5);
  }

  .content {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .layer {
    width: 100%;
  }

  .content-map-bg {
    width: 110%;

    min-width: 1280px;
    filter: blur(5px);
    position: absolute;
    top: -20px;
    left: -5%;
    z-index: 1;
  }
</style>